<template>
<el-drawer title="海轮详情" :visible.sync="isShow" size="80%" :before-close="visibleChange" custom-class="shipDialog">
    <div class="demo-drawer__content">
        <el-table :data="shipTableData" v-loading="loading" class="shipTable">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand" style="padding: 10px 0px 10px 60px;">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="船名/航次">
                                    <span>{{ props.row.shipNameVoyage }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="船代">
                                    <span>{{ props.row.shipAgentName }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="预抵时间">
                                    <span>{{ props.row.projectedBerthDate }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="确报时间">
                                    <span>{{ props.row.sureDate }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="报港状态">
                                    <span>{{ props.row.statusLabel }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="呼号">
                                    <span>{{ props.row.callNo }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="进出口">
                                    <span>{{ props.row.inoutTypeLabel }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="贸别">
                                    <span>{{ props.row.tradeTypeLabel }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="进口吃水">
                                    <span>{{ props.row.inletDraft }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="出口吃水">
                                    <span>{{ props.row.outletDraft }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="目的地">
                                    <span>{{ props.row.destinationPort }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="货名">
                                    <span>{{ props.row.cargoInfoName }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="船名/航次" prop="shipNameVoyage">
            </el-table-column>
            <el-table-column label="船代" prop="shipAgentName">
            </el-table-column>
            <el-table-column label="预抵时间" prop="projectedBerthDate">
            </el-table-column>
            <el-table-column label="确报时间" prop="sureDate">
            </el-table-column>
            <el-table-column label="报港状态" prop="statusLabel">
            </el-table-column>
        </el-table>
    </div>
</el-drawer>
</template>

<script>
import drawer from "@/components/BaseTable/drawer";
export default {
    components: {
        drawer,
    },
    props: {
        isShow: {
            type: Boolean,
            default: false,
        },
        shipid: {
            type: String,
            default: ''
        }
    },
    watch: {
        isShow: {
            immediate: true,
            handler(val) {
                if (val) {
                    this.getShipTableData()
                }
            },
        }
    },
    data() {
        return {
            shipTableData: [],
            loading: false
        };
    },
    methods: {
        visibleChange(val) {
            this.$emit("visibleChange");
        },
        getShipTableData() {
            this.loading = true;
            this.$http.get(`/psys-business-service/api/external/pointlineplane/${this.$version}/listshipbyid?shipid=${this.shipid}`)
                .then(res => {
                    this.loading = false
                    if (res.data.code != "0000") {
                        return this.$message.error(res.data.msg);
                    }
                    this.shipTableData = res.data.data
                });
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../../assets/searchfrom";

/deep/ .shipDialog {
    height: 80%;
    overflow: auto;

    .el-dialog__body {
        padding: 0 0 20px 0;
    }

    .shipTable {
        .el-form-item {
            margin-bottom: 0;
        }
    }
}
</style>
